<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title="计件标准"
      width="50%"
      @close="handleCancel"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="userRef"
        label-width="120px"
        :inline="true"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工艺类型" prop="technologyType">
              <el-select v-model="form.technologyType" style="width: 200px">
                <el-option
                  v-for="item in standard_technology_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="form.technologyType == '1'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="单位" prop="unit">
                <el-select v-model="form.unit" style="width: 200px">
                  <el-option
                    v-for="item in standard_unit"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="机器类型" prop="machineType">
                <el-select style="width: 200px" v-model="form.machineType">
                  <el-option
                    v-for="item in standard_machine_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="计件标准(元)" prop="pieceStandard">
                <el-input
                  style="width: 200px"
                  type="number"
                  v-model="form.pieceStandard"
                  placeholder="请输入计件标准"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="工作内容" prop="workContent">
                <el-select style="width: 200px" v-model="form.workContent">
                  <el-option
                    v-for="item in standard_work_content"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="计件描述" prop="pieceDescribe">
                <el-input
                  style="width: 200px"
                  v-model="form.pieceDescribe"
                  placeholder="请输入计件描述"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if="form.technologyType == '2'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="计件标准(元)" prop="pieceStandard">
                <el-input
                  style="width: 200px"
                  type="number"
                  v-model="form.pieceStandard"
                  placeholder="请输入计件标准"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="品种" prop="breed">
                <el-input
                  style="width: 200px"
                  v-model="form.breed"
                  placeholder="请输入品种"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="印张" prop="sheet">
                <el-input
                  style="width: 200px"
                  type="number"
                  v-model="form.sheet"
                  placeholder="请输入印张"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开数" prop="bookSize">
                <el-select v-model="form.bookSize" style="width: 200px">
                  <el-option
                    v-for="item in ems_produce_book_size"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="计件描述" prop="pieceDescribe">
                <el-input
                  style="width: 200px"
                  v-model="form.pieceDescribe"
                  placeholder="请输入计件描述"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if="form.technologyType == '3'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="计件标准(元)" prop="pieceStandard">
                <el-input
                  style="width: 200px"
                  type="number"
                  v-model="form.pieceStandard"
                  placeholder="请输入计件标准"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计件描述" prop="pieceDescribe">
                <el-input
                  style="width: 200px"
                  v-model="form.pieceDescribe"
                  placeholder="请输入计件描述"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if="form.technologyType == '5'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="计件标准(元)" prop="pieceStandard">
                <el-input
                  style="width: 200px"
                  type="number"
                  v-model="form.pieceStandard"
                  placeholder="请输入计件标准"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计件描述" prop="pieceDescribe">
                <el-input
                  style="width: 200px"
                  v-model="form.pieceDescribe"
                  placeholder="请输入计件描述"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if="form.technologyType >= 6">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="计件标准(元)" prop="pieceStandard">
                <el-input
                  style="width: 200px"
                  type="number"
                  v-model="form.pieceStandard"
                  placeholder="请输入计件标准"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="书刊类型" prop="bookType">
                <el-select v-model="form.bookType" style="width: 200px">
                  <el-option
                    v-for="item in sys_standard_book_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { addOrupdate, getByIdOrupdate } from "@/api/production/standard.js";

const emit = defineEmits(["changeUpdate", "cancel", "success"]);
const { proxy } = getCurrentInstance();
const {
  ems_produce_book_size,
  standard_unit,
  standard_machine_type,
  standard_work_content,
  standard_technology_type,
  sys_standard_book_type,
} = proxy.useDict(
  "standard_unit",
  "standard_machine_type",
  "standard_work_content",
  "standard_technology_type",
  "sys_standard_book_type",
  "ems_produce_book_size"
);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  selsetId: {
    type: String,
    default: "",
  },
});
const userRef = ref(null);
const data = reactive({
  form: {},
  rules: {
    type: [
      { required: true, message: "请先选择", trigger: ["blur", "change"] },
    ],
    bookType: [
      { required: true, message: "请先选择", trigger: ["blur", "change"] },
    ],
    workContent: [
      {
        required: true,
        message: "计件内容不能为空",
        trigger: ["blur", "change"],
      },
    ],
    unit: [
      { required: true, message: "单位不能为空", trigger: ["blur", "change"] },
    ],
    machineType: [
      {
        required: true,
        message: "机器类型不能为空",
        trigger: ["blur", "change"],
      },
    ],
    pieceStandard: [
      {
        required: true,
        message: "计件标准不能为空",
        trigger: ["blur", "change"],
      },
    ],
  },
  typeList: [
    { label: "印刷", value: "1" },
    { label: "折页", value: "2" },
    { label: "覆膜", value: "3" },
    { label: "装订", value: "4" },
    { label: "精装", value: "5" },
  ],
});
const { form, rules } = toRefs(data);

watch(
  () => props.visible,
  (val) => {
    if (val) {
    }
  }
);
watch(
  () => props.selsetId,
  (val) => {
    if (val) {
      getByIdOrupdate({ id: val }).then((res) => {
        form.value = { ...res.data };
      });
    }
  }
);

const handleCancel = () => {
  proxy.resetForm("userRef");
  form.value.technologyType = undefined;
  form.value.unit = undefined;
  form.value.pieceStandard = undefined;
  form.value.workContent = undefined;
  form.value.pieceDescribe = undefined;
  form.value.breed = undefined;
  form.value.sheet = undefined;
  form.value.bookSize = undefined;
  form.value.id = undefined;
  emit("cancel");
};
// 保存
const submitForm = async () => {
  try {
    console.log(props.selsetId);
    console.log(form.value);
    await userRef.value.validate();
    if (props.selsetId) {
      await addOrupdate({
        ...form.value,
      });
      ElMessage({
        message: "编辑成功",
        type: "success",
      });
    } else {
      await addOrupdate({
        ...form.value,
      });
      ElMessage({
        message: "新增成功",
        type: "success",
      });
    }
    emit("success");
  } catch {}
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 20px;
}
.container-box {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-flow: row wrap;
}
</style>
